<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<div id="app" @click="dspl=!dspl">
<button onclick="location.href='http://localhost:80/menu.html'">菜单</button>
<transition name="el-fade-in-linear">
    {{dspl}}
    <div v-show="dspl" class="transition-box">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>卡片名称</span>
                <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div v-for="o in 4" :key="o" class="text item">
                {{'列表内容 ' + o }}
            </div>
        </el-card>
    </div>
</transition>
</div>
<style>
    #app{
        width: 2000px;
        height: 2000px;
    }
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 480px;
    }
</style>
<script>
    var vm=new Vue({
        el:'#app',
        methods:{

        },
        data(){
            return{
                dspl:true
            }
        }
    })
</script>
</body>
</html>